<template>
	<view class="container">
		<page-container v-if="isPage"></page-container>

		<u-navbar leftIconColor="#fff" placeholder title="确认订单" :autoBack="true"></u-navbar>
		<view class="goods-info pad-24">
			<view class="image-box bg-theme1 pad-16 centerY radius24">
				<image class="goods-cover radius16" :src="goodsInfo.cover">
				</image>
				<view class="mar-left-32 color-white font-36">{{goodsInfo.name}}</view>
			</view>

			<view class="pad-top-bottom-24 bg-theme1 mar-top-24 radius24">
				<view class="cell betweenX pad-24 font-28">
					<view class="color-grey">创作者</view>
					<view class="color-theme" v-if="goodsInfo.author_info">{{goodsInfo.author_info.name}}</view>
				</view>
				<view class="cell betweenX pad-24 font-28">
					<view class="color-grey shrink">区块链地址</view>
					<view class="centerY mar-left-32 color-theme">
						<text class="flex-w shrink multi1 ">{{goodsCode.tx_hash}}</text>
						<image class="copy" src="../../static/icon/copy-icon.png"></image>
					</view>
				</view>
				<view class="cell betweenX pad-24 font-28">
					<view class="color-grey">订单金额</view>
					<view class="color-theme">￥{{info.price}}</view>
				</view>
			</view>

			<pay-list :allowPlat="info.allow_pay_plat" @payNumber="payNumber" @hanldeTypePay="hanldeTypePay"
				scene="market"></pay-list>

		</view>
		<view class="button-box pad-left-right-32 pad-top-bottom-10 bg-theme1 centerY">
			<view class="button-price centerY color-theme">
				<view class="font-24">￥</view>
				<view class="font-44">{{info.price}}</view>
			</view>
			<view :class="isPay > 0 ? '' : 'disabled'" class="button flex-w font-32"
				@click="$u.debounce(hanldePay,500)">立即购买
			</view>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		marketDetail,
		addMarketOrder,
		payPlat,
		openWallet,
		userWalletOPen,
		cashierPay,
		addOpenWalletOrder,
		userWalletInfo
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 详情数据
				goodsInfo: {},
				data: {},
				// 开通了几个支付
				isPay: 0,
				// 支付列表
				payList: [],
				// 默认支付方式
				pay: 0,
				// 支付方式
				pay_plat: 0,
				//编号信息
				goodsCode: {},
				// 寄售详情
				info: {},
				// 显示页面加载
				isPage: false
			}
		},
		onLoad(options) {
			this.isPage = true;
			this.marketId = options.market_id;
			this.getInfo().then(res=>{
				this.isPage = false;
			});
		},
		methods: {
			// 当前是那个支付
			hanldeTypePay(id) {
				this.payId = id;
			},
			// 开通了几个支付
			payNumber(number) {
				this.isPay = number;
			},
			// 点击支付
			hanldePay() {

				// 快付通支付
				if (this.payId == 13) {
					uni.navigateTo({
						url: `/pages/kft/marketCashier?id=${this.marketId}`
					})
					return
				}

				// 开通了支付
				if (this.isPay > 0) {
					uni.showLoading({
						title: '支付中...',
						mask: true
					})

					// 创建订单
					addMarketOrder({
						market_id: this.info.id
					}).then(order => {
						// 支付订单
						cashierPay({
							order_id: order.data.order_id,
							pay_plat: this.payId
						}).then(res => {
							uni.hideLoading();
							let {
								pay_data
							} = res.data;
							// #ifdef APP-PLUS
							if (this.payId == 10) {
								uni.navigateTo({
									url: '/pages/web-view/web-view?url=' + pay_data.pay_url
								})
							}
							// #endif
							// #ifdef H5
							window.location.href = pay_data.pay_url
							// #endif
						}).catch(() => {
							uni.hideLoading();
						})
					})
				} else {
					uni.$u.toast('请开通支付方式');
				}
			},
			// 获取详情
			getInfo() {
				return new Promise((resolve, reject) => {
					marketDetail({
						id: this.marketId
					}).then(res => {
						let {
							info,
							goods_info,
							goods_code_info
						} = res.data;
						this.info = info;
						this.goodsInfo = goods_info;
						this.goodsCode = goods_code_info;
						resolve();
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		.goods-info {
			.goods-cover {
				width: 160rpx;
				height: 160rpx;
			}
		}

		.copy {
			display: block;
			width: 28rpx;
			height: 28rpx;
		}

		.icon-box {
			width: 30rpx;
			flex-shrink: 0;
			height: 30rpx;
			border: 1rpx solid #c8c9cc;
			border-radius: 50%;
		}

		.button-box {
			position: fixed;
			width: 100%;
			bottom: 0;

			.button-price {
				margin-right: 100rpx;
			}

			.button {
				background: $uni-bg-theme;
				color: #fff;
				text-align: center;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 8rpx;
			}

			.disabled {
				opacity: .5;
			}
		}

		.button-pay {
			background: $uni-bg-theme;
			color: #fff;
			font-size: 24rpx;
			line-height: 44rpx;
			padding: 0 20rpx;
			border-radius: 8rpx;
		}
	}
</style>